<template>
  <!-- 理论题考试 -->
  <div style="width: 100%;">

    <!-- 顶部留白 -->
    <div class="topWhiteSpace">

    </div>
    <!-- 背景图 -->
    <div class="backImg">

      <!-- 全国电子税务局模拟竞赛活动 标题 -->
      <div class="topTittleBox">
        <div style="font-size: xx-large;color: #fff;font-weight: 500;width: fit-content;">
          全国电子税务局模拟竞赛活动
        </div>
        <div style="display: flex;flex-direction: column;align-items: flex-end;">
          <div style="font-size: large;color: #fff;font-weight: 500;width: fit-content;">
            倒计时:3小时45分
          </div>
          <div style=" color: #fff; width: fit-content;">
            场次1:2025-5-8 9:30至-11:30
          </div>
        </div>
      </div>

      <!-- 做题栏 -->
      <div class="bottExamBox">
        <!-- 顶部栏 -->
        <div class="top">
          <div class="tag">
            <div class="tang">
              理论题考试
            </div>
            <!-- 三角形 -->
            <canvas id="triangle" width="20" height="40"></canvas>
          </div>
          <div class="text">
            单项选择题(本类题共20小题，每小题2分，共40分。每小题备选答案中:只有一个符合题意的正确答案。错选、不选均不得分。)
          </div>
        </div>

        <!-- 左侧选题栏和右侧做题栏 -->
        <div class="bott">
          <div class="lef">
            <!-- 题目序号选择器 -->
            <QuestionCard :questions="questionList" @clickItem="clickItem" />

            <div class="notice">
              <div>
                题号状态说明:
              </div>
              <div>
                1:打钩为已做题状态
              </div>
              <div>
                2:红框代表做错状
              </div>
              <div>
                3:默认为厌色框及字(未做题状态)
              </div>
              <div>
                4:选中状态为蓝色背景白色字状态
              </div>
            </div>
          </div>
          <div class="rig">

          </div>
        </div>
      </div>

    </div>

    <!-- 底部留白 -->
    <div class="bottWhiteSpace">

    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { globalStore } from '@/stores/global.js'
import { storeToRefs } from 'pinia'
import QuestionCard from '@/components/QuestionCard/QuestionCard.vue'

const { dataList, dateRange, questionList, currentSelectedItem } = storeToRefs(globalStore())
console.log('dataList.value:', dataList.value);
console.log('dateRange.value:', dateRange.value);
const router = useRouter()

//点击了这个选项
const clickItem = (clickedItem) => {
  console.log('点击了这个选项clickedItem:', clickedItem);
  currentSelectedItem.value = clickedItem
  console.log('选中的题号项currentSelectedItem.value:', currentSelectedItem.value);
  questionList.value.map((item, index) => {
    //将当前点击的题号标蓝
    if (clickedItem.id === item.id) {
      item.isClicked = true
    } else
    //把其他的题号，如果以前被点击过就取消他的点击状态
    {
      item.isClicked = false
    }
  })
}

//三角形的样式
const triangleStyle = () => {
  const canvas = document.getElementById("triangle");
  const ctx = canvas.getContext("2d");

  // 三角形的三个点
  const A = { x: 40, y: 70 }; // 左下
  const B = { x: 40, y: 30 }; // 左上
  const C = { x: 60, y: 50 }; // 顶点朝右

  // 可选：计算重心用于旋转
  const G = {
    x: (A.x + B.x + C.x) / 3,
    y: (A.y + B.y + C.y) / 3
  };

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 三角形移动
  ctx.translate(-40, -30);

  // 如需要旋转，比如旋转30度
  // ctx.translate(G.x, G.y);
  // ctx.rotate((30 * Math.PI) / 180);
  // ctx.translate(-G.x, -G.y);

  // 画三角形
  ctx.beginPath();
  ctx.moveTo(A.x, A.y);
  ctx.lineTo(B.x, B.y);
  ctx.lineTo(C.x, C.y);
  ctx.closePath();
  ctx.fillStyle = "#1a74e6";
  ctx.fill();
};


onMounted(() => {
  //三角形的样式
  triangleStyle()

})

</script>

<style scoped lang="scss">
.backImg {
  height: 80vh;
  background-image: url('@/assets/background.jpg');
  background-size: cover;
  background-position: center;
  width: calc(100% + 40px);
  margin-left: -20px;

  // 背景图片div内部布局
  display: flex;
  flex-direction: column;
  align-items: center;

  .topTittleBox {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }

  .bottExamBox {
    background-color: #fff;
    width: 70%;
    /* 使用min-height强制高度,不加!important也可以，min-height已经强制指定高度了 */
    min-height: 108% !important;

    .top {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 40px;
      padding-top: 20px;

      .tag {
        display: flex;

        // 理论题考试标签长方体部分
        .tang {
          background-color: #1a74e6;
          width: fit-content;
          color: #fff;
          display: flex;
          align-items: center;
          font-size: larger;
          font-weight: 500;
          height: 40px;
          padding: 0 46px;
        }

        //三角形部分
        #triangle {
          height: 40px;
        }
      }

      .text {
        width: 40%;
        font-size: small;
        padding-right: 2%;
      }

    }

    .bott {
      width: 100%;
      height: 91%;

      .lef {
        width: 178px;
        height: 100%;
        box-sizing: border-box; //默认是content-box，padding会加大实际宽高
        border: 1px solid #a8a9ae;
        border-top: none;
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .notice {
          font-size: small;
          color: #999999;
          padding: 10px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-bottom: 50px;
        }
      }

      .rig {}

    }
  }
}

.bottWhiteSpace {
  width: calc(100% + 40px);
  margin-left: -20px;
  height: 140px;
  background-color: #fff;
}

.topWhiteSpace {
  width: calc(100% + 40px);
  //向左上角偏移20px
  margin-left: -20px;
  margin-top: -40px;
  height: 30px;
  background-color: #fff;
}
</style>